<template>
  <div class="index-container">
    <el-row :gutter="15">
      <page-header />
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <el-card shadow="hover" skeleton>
          <template #header>
            <div class="card-header">
              <span>最新消息通告</span>
            </div>
            <el-tag class="card-header-tag" type="success">进入消息中心</el-tag>
          </template>
          <div>
            <el-table
              :data="NoticeTopList"
              :show-header="false"
              style="width: 100%"
            >
              <el-table-column
                prop="addTime"
                label="时间"
                show-overflow-tooltip
                width="170"
              />
              <el-table-column show-overflow-tooltip>
                <template #default="{ row }">
                  <a
                    :href="row.UrlLink"
                    target="LinkTarget"
                    @click="isRead(row)"
                  >
                    {{ row.NoticeMemo }}
                  </a>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <el-card shadow="hover" skeleton>
          <template #header>
            <div class="card-header">
              <span>一对一站内信</span>
            </div>
            <el-tag class="card-header-tag">查看更多</el-tag>
          </template>
          <div>
            <el-table
              :data="EmailTopList"
              :show-header="false"
              style="width: 100%"
            >
              <el-table-column
                prop="addTime"
                label="时间"
                width="170"
                show-overflow-tooltip
              />
              <el-table-column
                prop="FromStaff"
                label="发送人"
                width="80"
                show-overflow-tooltip
              />
              <el-table-column show-overflow-tooltip>
                <template #default="{ row }">
                  <a
                    :href="row.UrlLink"
                    target="LinkTarget"
                    @click="isRead(row)"
                  >
                    {{ row.NoticeMemo }}
                  </a>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <el-card shadow="hover" skeleton>
          <template #header>
            <div class="card-header">
              <span>待办任务提醒</span>
            </div>
            <el-tag class="card-header-tag">更多待办任务</el-tag>
          </template>
          <!-- <el-table :data="tableData" :show-header="false" style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="110"
              show-overflow-tooltip
            />
            <el-table-column
              prop="name"
              label="任务名称"
              show-overflow-tooltip
            />
            <el-table-column prop="address" label="任务事项" />
            <el-table-column label="去处理" width="90">
              <el-button type="primary" size="small">去处理</el-button>
            </el-table-column>
          </el-table> -->
        </el-card>
      </el-col>
      <!-- <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <el-card shadow="hover" skeleton>
          <template #header>
            <div class="card-header">
              <span>待处理业务</span>
            </div>
            <el-tag class="card-header-tag">更多待处理业务</el-tag>
          </template>
          <el-table :data="tableData" show-header="false" style="width: 100%">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="name" label="任务名称" />
            <el-table-column prop="address" label="任务事项" />
            <el-table-column label="去处理" width="100">
              <el-button type="primary" size="small">去处理</el-button>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col> -->
      <!-- <icon-list /> -->
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="hover" skeleton>
          <template #header>
            <div class="card-header">
              <span>常用网址</span>
            </div>
            <el-tag class="card-header-tag">更多网址</el-tag>
          </template>
          <div style="display: flex; flex-wrap: wrap">
            <a
              v-for="(item, index) in list"
              :key="index"
              :href="item.SiteLinkUrl"
              target="_blank"
            >
              <el-button plain type="primary" size="small">
                {{ item.SiteLinkName }}
              </el-button>
            </a>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="6">
        <el-statistic title="Daily active users" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic :value="138">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              Ratio of men to women
              <el-icon style="margin-left: 4px" :size="12">
                <Male />
              </el-icon>
            </div>
          </template>
          <template #suffix>/100</template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="Total Transactions" :value="outputValue" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="Feedback number" :value="562">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
  import { getList, getHomeList, Read } from '@/api/systemsetSitelink'
  import PageHeader from './components/PageHeader'
  // import News from './components/News'
  // import Plan from './components/Plan'
  // import Access from './components/Access'
  // import Authorization from './components/Authorization'
  // import ChinaMap from './components/ChinaMap'
  // import IconList from './components/IconList'
  // import MyProject from './components/MyProject'
  // import VersionInformation from './components/VersionInformation'

  export default defineComponent({
    name: 'Index',
    components: {
      PageHeader,
      // News,
      // Plan,
      // Access,
      // Authorization,
      // ChinaMap,
      // VersionInformation,
      // IconList,
      // MyProject,
    },
    setup() {
      const state = reactive({
        list: [],
        NoticeTopList: [],
        EmailTopList: [],
        tableData: [
          {
            date: '2024-03-04',
            name: '您有一个客户商机需要跟进',
            address: '高阳三利毛巾纺织有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个客户合同需要确认收款',
            address: '河北博为电力科技有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个客户合同需要确认开票',
            address: '河北优耐特电力科技有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个业务合同需要审核分单',
            address: '保定澳美服装有限公司',
          },
          {
            date: '2024-03-04',
            name: '您有一个客户商机需要跟进',
            address: '高阳三利毛巾纺织有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个客户合同需要确认收款',
            address: '河北博为电力科技有限公司',
          },
        ],
      })

      const onGetHomeList = async () => {
        const { data } = await getHomeList()
        state.NoticeTopList = data.NoticeTopList
        state.EmailTopList = data.EmailTopList
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list },
        } = await getList(state.queryForm)
        state.list = list
        state.listLoading = false
      }
      onMounted(() => {
        fetchData()
        onGetHomeList()
      })
      const isRead = async (row) => {
        console.log(row, '123123123')
        if (row.LinkType == 0) {
          const dataMsg = {
            NoticeID: row.NoticeID,
          }
          Read(dataMsg)
        }
      }

      return {
        ...toRefs(state),
        fetchData,
        onGetHomeList,
        isRead,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 10 !important;
    background: $base-color-background !important;

    :deep() {
      .page-header {
        margin-bottom: 20px;
      }

      .access,
      .authorization,
      .version-information {
        min-height: 268px;
        margin-bottom: 20px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
</style>
